<template>
  <div class="upsrc">
    <img :src="imgUrl ? imgUrl : require('@/assets/images/upbtn.png')" :style="{width:!imgUrl?'auto':''}" >
    <input type="file" name="file_head" id="file_head" ref="file_head"  @change="uploadImage" />
    <i v-if='imgUrl' class="deleteBtn"><img @click="handleDelete" :src="require('@/assets/images/deleteWhite.png')" /></i>
  </div>
</template>

<script>
import {buildImage, uploadUntil} from '@/assets/js/ImageUtil'

export default {
  name: 'wap-image',
  data() {
    return {
      url: ""
    }
  },
  components: {},
  model:{
    prop:'value',
    event:'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  beforeCreate(){},
  beforeMount(){}, 
  mounted(){},
  methods: {
    uploadImage () {
      let filHead = this.$refs['file_head']
      let _this = this
      uploadUntil(filHead, function (data) {
        _this.$emit('change', data[0])
      })
    },
    handleDelete () {
      this.$emit('change', '')
    }
  },
  computed: {
    imgUrl: {
      get: function () {
        return buildImage(this.value)
      }
    }
  }
}
</script>

<style scoped>
.upsrc {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 10px;
  display: flex;
  justify-content: center;
  align-items: Center;
  border: 1px solid #d9d9d9;
  border-radius: 3px;
  overflow: hidden;
}
.upsrc img {
  width: 100%;
}
#file_head {
  position: absolute;
  width: 140px;
  height: 140px;
  left: 0;
  top: 0;
  opacity: 0;
}
.deleteBtn {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 25px!important;
  height: 25px!important;
  border-radius: 20px;
  text-align:center;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: Center;
}
.deleteBtn img {
  width: 70%;
  height: 70%
}
</style>
